<template>
  <div class="box">
    <div class="box2" @click="fn"></div>
  </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供 data methods computed watch 生命周期的钩子
export default {
  created () {
    console.log("我是created")
  },
  methods: {
    fn (){
      alert("你好")
    }
  }
}
</script>

<style lang="less">
/*
   让style支持less
    1. 给style加上 lang="less"
    2. 安装依赖包 less less-loader
      yarn add less less-loader
*/
.box {
  width: 400px;
  height: 400px;
  background-color: pink;

  /*less 中的嵌套语法*/
  .box2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}


</style>